// 依赖(载入)jquery第三方模块。使用jquery下面的方法。
import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";


function taobao_registry() {
    //1.获取元素
    const form = $('form'); //获取form表单
    const username = $('.username'); //用户名
    const password = $('.password'); //密码
    const repass = $('.repass'); //密码确认
    const tel = $('.tel'); //获取tel盒子
    const aSpan = $('form span'); //获取form表单下面所有的span
    let userflag = true;
    let telflag = true;
    let passflag = true;
    let repassflag = true;

    //2.验证用户名
    //得到焦点，显示提示文字
    username.on('focus', function() {
        aSpan.eq(0)
            .css('color', '#333')
            .html('设置后不可更改，中英文均可，最长14个英文或7个汉字');
    });

    //失去焦点，进行检测。
    username.on('blur', function() {
        if ($(this).val() !== '') { //不为空
            //最长14个英文或7个汉字
            //获取用户名，判断长度(将汉字替换成两个英文来计算)
            let len = $(this).val().replace(/[\u4e00-\u9fa5]/g, 'aa').length;
            if (len <= 14) { //正常
                //开始写正则规则
                let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/; //中英文均可
                if (reg.test($(this).val())) { //通过验证，做重名检测和将数据提交给数据库。
                    //通过表单验证，做重名检测
                    $.ajax({
                        type: 'post',
                        url: 'http://localhost/JS2106/taobao_project/php/registry.php',
                        data: {
                            user: $(this).val()
                        }
                    }).done(function(data) {
                        //data:后端返回的匹配的结果。
                        if (data === 'true') {
                            aSpan.eq(0)
                                .css('color', 'red')
                                .html('用户名已经存在');
                            userflag = false; //阻止注册跳转
                        } else {
                            aSpan.eq(0)
                                .css('color', 'green')
                                .html('√');
                            userflag = true; //通过
                        }
                    })

                } else { //不通过
                    aSpan.eq(0)
                        .css('color', 'red')
                        .html('用户名格式有误');
                    userflag = false; //阻止注册跳转
                }

            } else {
                aSpan.eq(0)
                    .css('color', 'red')
                    .html('输入长度有误');
                userflag = false; //阻止注册跳转
            }
        } else {
            aSpan.eq(0)
                .css('color', 'red')
                .html('用户名不能为空');
            userflag = false; //阻止注册跳转
        }
    });

    //3.密码
    //得到焦点，显示提示文字
    password.on('focus', function() {
        aSpan.eq(1)
            .css('color', '#333')
            .html('长度为8~14个字符,字母数字及特殊字符至少包含两种');
    });
    //oninput事件：只要文本框的内容发生变化，触发
    //检测密码的弱中强
    //弱：一种字符
    //中：二种或者三种
    //强：四种字符  
    password.on('input', function() {
        //准备四种字符的正则表达式
        let regnum = /\d+/; //因为直接找是否存在，无需添加首尾匹配
        let regupper = /[A-Z]+/;
        let reglower = /[a-z]+/;
        let regother = /[\W_]+/; //特殊符号
        let count = 0; //字符类型进行计数
        if (regnum.test($(this).val())) { //存在数字
            count++;
        }

        if (regupper.test($(this).val())) {
            count++;
        }

        if (reglower.test($(this).val())) {
            count++;
        }

        if (regother.test($(this).val())) {
            count++;
        }
        console.log(count);

        switch (count) {
            case 1:
                aSpan.eq(1)
                    .css('color', 'red')
                    .html('弱');
                passflag = false;
                break;
            case 2:
            case 3:
                aSpan.eq(1)
                    .css('color', 'orange')
                    .html('中');
                passflag = true;
                break;
            case 4:
                aSpan.eq(1)
                    .css('color', 'green')
                    .html('强');
                passflag = true;
                break;
        }
    });

    //失去焦点，进行检测。
    password.on('blur', function() {
        if ($(this).val() !== '') {
            if ($(this).val().length >= 8 && $(this).val().length <= 14) { //检测长度
                if (passflag) { //通过
                    aSpan.eq(1)
                        .css('color', 'green')
                        .html('√');
                }
            } else {
                aSpan.eq(1)
                    .css('color', 'red')
                    .html('密码长度有问题');
                passflag = false;
            }
        } else {
            aSpan.eq(1)
                .css('color', 'red')
                .html('密码不能为空');
            passflag = false;
        }
    })

    //4.密码确认
    repass.on('focus', function() {
        aSpan.eq(2)
            .css('color', '#333')
            .html('请再次输入密码');
    });


    repass.on('blur', function() {
        //判断是否为空
        if ($(this).val() !== '') { //不为空
            if ($(this).val() === password.val()) { //两次密码一致的
                aSpan.eq(2)
                    .css('color', 'green')
                    .html('√');
                repassflag = true;
            } else {
                aSpan.eq(2)
                    .css('color', 'red')
                    .html('两次密码不一致');
                repassflag = false;
            }
        } else { //空
            aSpan.eq(2)
                .css('color', 'red')
                .html('密码确认框不能为空');
            repassflag = false;
        }
    });

    //5.手机号码
    //手机文本框得到焦点，显示提示文字。
    tel.on('focus', function() {
        aSpan.eq(3)
            .css('color', '#333')
            .html('请输入正确的手机号码');
    });

    //手机文本框失去焦点，进行验证。
    tel.on('blur', function() {
        //判断是否为空
        if ($(this).val() !== '') { //不为空
            //判断手机号码的格式是否正确 - 正则表达式
            let reg = /^1[358]\d{9}$/;
            if (reg.test($(this).val())) { //满足规则，通过
                aSpan.eq(3)
                    .css('color', 'green')
                    .html('√');
                telflag = true;
            } else { //不满足，报错
                aSpan.eq(3)
                    .css('color', 'red')
                    .html('手机号码格式不正确');
                telflag = false;
            }
        } else { //为空
            aSpan.eq(3)
                .css('color', 'red')
                .html('手机号码不能为空');
            telflag = false;
        }
    });

    //6.利用form提交数据不是ajax(两种提交数据的方式)
    //form+action+method+name+submit
    //满足表单验证之后再提交。
    form.on('submit', function() {
        if (username.val() === '') {
            aSpan.eq(0).css('color', 'red').html('用户名不能为空');
            userflag = false;
        }
        if (password.val() === '') {
            aSpan.eq(1).css('color', 'red').html('密码不能为空');
            passflag = false;
        }
        if (repass.val() === '') {
            aSpan.eq(2).css('color', 'red').html('密码确认不能为空');
            repassflag = false;
        }
        if (tel.val() === '') {
            aSpan.eq(3).css('color', 'red').html('手机号码不能为空');
            telflag = false;
        }

        //如果上面的四个表单任意一个出现标记为false，阻止表单提交。
        if (!userflag || !passflag || !repassflag || !telflag) {
            return false; //阻止表单提交
        }
    });
}

export {
    taobao_registry
}